<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>
</template>
<script>
  import moment from 'moment'
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enquireScreen from '@/utils/device'
  import { removeWatermark, setWaterMark } from '@/utils/watermark'
  import { updateSystemSetting, getSystemSettingdetails } from '@/api/api'

  export default {
    data () {
      return {
        locale: zhCN,
      }
    },
    created () {
      let that = this
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })
    },
    computed: {
      // 监听水印模式开启关闭及是否登录
      contractFile() {
        const token = this.$store.state.user.token
        const realname = this.$store.state.user.realname
        const watermark = this.$store.state.app.watermark
        const isOperateAjax = this.$store.state.app.isOperateAjax
        return { token, realname, watermark, isOperateAjax }
      }
    },
    watch: {
      // 初始化-水印模式
      'contractFile.realname'(newVal, oldVal){
        if(newVal) this.getSettingdetails(newVal)
      },
      // 监听-水印模式操作触发保存
      'contractFile.isOperateAjax'(newVal, oldVal){
        if(newVal) this.updateSystemSetting()
      }
    },
    methods: {
      // 保存水印配置
      updateSystemSetting() {
        let realname = this.$store.state.user.realname
        let watermark = this.$store.state.app.watermark
        let obj = {
          systemSetting: watermark.toString()
        }
        updateSystemSetting(obj)
        .then((res) => {
          if (res.success) {
            if (watermark) {
              setWaterMark(moment().format('YYYYMMDDHHmm'), realname)
            } else {
              removeWatermark()
            }
          } else {
            this.$store.dispatch('ToggleWatermark', !watermark)
          }
        })
        .catch((e) => {
          this.$message.error('出错了')
        })
        this.$store.dispatch('OperateAjax', false)
      },
      // 获取水印配置
      getSettingdetails(realname) {
        getSystemSettingdetails()
        .then((res) => {
          if (res.success) {
            let result = eval(res.result) ? true: false
            this.$store.dispatch('ToggleWatermark', result)
            if (result) {
              setWaterMark(moment().format('YYYYMMDDHHmm'), realname)
            } else {
              removeWatermark()
            }
          }
        })
        .catch((e) => {
          this.$message.error('出错了')
        })
      }
    }
  }
</script>
<style>
@font-face {
  font-family: jjcjh;
  src: url("/font/msyh.ttf");
}
  #app {
    height: 100%;
  }
</style>